<template>
	<view class="box">
		<view class="tu" v-for="(item,index) in tu" :key="item.id" @click="jumpSearch()" >
					<image :src="item.src" mode="widthFix"></image>
		</view>
		<view class="box1">
			<view class="switchSign"></view>
			<view class="nav" :class="{'flex-top':topfixed==1}">
				<view class="nav_top flex">
					<view class="nav_top1" v-for="(item,index) in nav_top" :key="index"
						:class="{'active':itemIndex == index}" @click="get1(index)">
						{{item.text}}
					</view>
				</view>

				<!-- <view :class="{active:itemIndex == 1}" @click="get1(1)">全部</view>
		       <view :class="{active:itemIndex == 2}" @click="get1(2)">洗车</view>
		        <view :class="{active:itemIndex == 3}" @click="get1(3)">美容</view> -->
				<view class="saixuan flex" >
					<view class="saixuan1" v-for="(item,index) in nav_list" :key="index"  @click="jump(index)" :class="{'active':itemIndex1 == index}">
						{{item.text}}
					</view>

				</view>
				<view class="saixuans"  v-if="isShow">
					<ul class="list flex1" v-for="(item,index) in nav_list" :key="index" v-if="itemIndex1==index">
						<li  class="list_list" v-for="(items,indexs) in item.content" :key="indexs" :class="{'active1':itemIndex2 == indexs}" @click="jumps(indexs)" >
							{{items.title}}
								
						</li>
					</ul>
				</view>
			
				
			</view>

			<!-- 筛选 -->

			<view class="contents">
				<view v-for="(item,index) in nav" :key="index" v-if="itemIndex==index">
					<view class="contenta" v-for="(items,indexs) in item.content" :key="index">
						<view class="contentb flex">
							<view class="contentc">
								<image :src="items.src" mode="widthFix"></image>
							</view>
							<view class="contentd">
								<span>{{items.text}}</span>
								<p>{{items.text1}}</p>
							</view>
						</view>
						<view class="contente">
							<view class="flex">
								<p>{{items.text2}} </p>
								<p class="flex contente_p"><span>{{items.num2}} </span><button>{{items.text4}}</button>
								</p>
							</view>
							<view class="flex">
								<p>{{items.text3}} </p>
								<p class="flex contente_p"><span>{{items.num1}} </span><button>{{items.text4}}</button>
								</p>
							</view>
						</view>
					</view>
				</view>	
			</view>
		</view>
	  
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tu: [{
					src: '../../static/3.jpg'
				}],
				isShow:false,
				topfixed: 0,
				currentId:0,
				nav_top: [{
						id: '1',
						text: '全部'
					},
					{
						id: '1',
						text: '洗车'
					},
					{
						id: '1',
						text: '美容'
					}
				],
				nav_list: [
					{
						id: '1',
						text: '全部车型',
						content:[
							{ids:'1',title:'全部'},
							{ids:'2',title:'五座轿车'},
							{ids:'3',title:'SUV/MPV'},
						]
					},
					{
						id: '2',
						text: '全市',
						content:[
							{ids:'1',title:'全市'},
							{ids:'2',title:'东平县'},
							{ids:'3',title:'肥城市'},
							{ids:'4',title:'宁阳县'},
							{ids:'5',title:'泰山区'},
							{ids:'6',title:'新泰市'},
							{ids:'7',title:'岱岳区'},
						]
					},
					{
						id: '3',
						text: '全部服务',
						content:[
							{ids:'1',title:'全部'},
							{ids:'2',title:'普通洗车'},
							{ids:'3',title:'精致洗车'},
							{ids:'4',title:'手工打蜡'},
							{ids:'5',title:'抛光打蜡'},
							{ids:'6',title:'全套打蜡'},
							{ids:'7',title:'内饰清洁'},
							{ids:'8',title:'空调清洁'},
							{ids:'9',title:'臭氧杀菌'},
							{ids:'10',title:'玻璃水'}
						]
					},
					{
						id: '4',
						text: '营业状态',
						content:[
							{ids:'1',title:'全部'},
							{ids:'2',title:'营业中'},
							{ids:'3',title:'休息中'},
						]
					}
				],
				itemIndex: 0,
				itemIndex1: -1,
				itemIndex2:0,
				text: '全部车型',
				text1: '全市',
				text2: '全部服务',
				nav: [
					{
					id:'1',
					content:[
						{
							id:'1',src: '../../static/tyy.jpg',
						text: '泰林汽车服务',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'2',src: '../../static/tyy.jpg',
						text: '人和车改',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'3',src: '../../static/tyy.jpg',
						text: '宝群名车维修货场路店',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'4',src: '../../static/tyy.jpg',
						text: '车途汽车美容中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'5',src: '../../static/tyy.jpg',
						text: '泰安卡诺嘉汽车一站式服务中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
					text3:'全套清洗',
					num1: '￥15',
					num2: '￥120',
						text4: '抢购'
						},
						{
							id:'6',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'7',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'8',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						}
					]},
					{
					id:'2',
					content:[
						{
							id:'1',src: '../../static/tyy.jpg',
						text: '泰林汽车服务',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'2',src: '../../static/tyy.jpg',
						text: '人和车改',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'3',src: '../../static/tyy.jpg',
						text: '岳泰汽车凹陷复原中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'4',src: '../../static/tyy.jpg',
						text: '车途汽车美容中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'5',src: '../../static/tyy.jpg',
						text: '泰安卡诺嘉汽车一站式服务中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
					text3:'全套清洗',
					num1: '￥15',
					num2: '￥120',
						text4: '抢购'
						},
						{
							id:'6',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'7',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'8',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						}
					]},
					{
					id:'3',
					content:[
						{
							id:'1',src: '../../static/tyy.jpg',
						text: '泰林汽车服务',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'2',src: '../../static/tyy.jpg',
						text: '人和车改',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'3',src: '../../static/tyy.jpg',
						text: '宝群名车维修货场路店',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'4',src: '../../static/tyy.jpg',
						text: '车途汽车美容中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'5',src: '../../static/tyy.jpg',
						text: '泰安卡诺嘉汽车一站式服务中心',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
					text3:'全套清洗',
					num1: '￥15',
					num2: '￥120',
						text4: '抢购'
						},
						{
							id:'6',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'7',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						},
						{
							id:'8',src: '../../static/tyy.jpg',
						text: '易捷汽服泰安10站',
						text1: '1.76km|山东省泰安市泰山区南湖大街',
						text2: '标准洗车-五座轿车',
						text3:'全套清洗',
						num1: '￥15',
						num2: '￥120',
						text4: '抢购'
						}
					]}
					]
		}},
		methods: {
			//tab一
			get1:function(index) {
				this.itemIndex = index
			},
			//跳转教程
			jumpSearch: function() {
				uni.navigateTo({
					url: '/pages/index/jiaocheng',
					success: res => {
						console.log(11)
					}
				})
			},
			//tab二
			jump:function(index){
				this.currentId=index
				this.itemIndex1 = index
				this.isShow=true
				// this.isShow=!this.isShow
				console.log(index)
			},
			//tab三
			jumps:function(indexs){
				this.itemIndex2 = indexs
				console.log(indexs)
			}
		},
		// 页面滚动
		onPageScroll(res) {
			var _this = this
			var temptop;
			const query = uni.createSelectorQuery();
			query.select('.switchSign').boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function(res) {
				res[0].top // .switchSign节点距离上边界的坐标
				res[1].scrollTop // 显示区域的竖直滚动位置
				temptop = res[0].top;
				if (temptop <= '2') {
					_this.topfixed = 1;
					
				} else {
					_this.topfixed = 0;
					
				}
			})
		},
	}
</script>

<style lang="scss">
	@import url("car.css");
</style>
